{include file="public/header-static"/} {include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">

            <div class="row">
                <div class="col-md-12">

                    <div class="row">
                        <!--  广告位营业额 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user-name" style="text-align: left;">
                                        广告位营业额
                                    </div>
                                    <div>
                                        <canvas id="businessVolume" width="600" height="282.5"></canvas>
                                        <!-- <canvas id="businessVolume"></canvas> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  广告位营业额 end-->

                        <!--  广告位数据 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user-name" style="text-align: left;">
                                        广告位数据
                                    </div>

                                    <div class="d-fix">
                                        <div class="d-left" style="width: 100%;">
                                            <div class="item">
                                                <div class="title">
                                                    <span class="left-index">
														1
													</span> 社区广告位一
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="title">
                                                    <span class="left-index">
														2
													</span> 社区广告位二
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="title">
                                                    <span class="left-index">
														3
													</span> 社区广告位三
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>

                                        </div>


                                        <div class="d-rigth" style="width: 100%;">
                                            <div class="item">
                                                <div class="title">
                                                    <span class="right-index">
														4
													</span> 社区广告位四
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="title">
                                                    <span class="right-index">
														5
													</span> 社区广告位五
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="title">
                                                    <span class="right-index">
														6
													</span> 社区广告位六
                                                </div>
                                                <div class="adData-content">
                                                    <span class="adData-count">投放社群56个</span>
                                                    <span class="adData-money">2,565.02</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  广告位数据 end-->

                    </div>

                </div>
            </div>


            <div class="row">
                <div class="col-md-12">

                    <div class="row">
                        <!--  城市数据 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth positionBox">
                                    <div class="pullDown" onclick="pullDown1()"></div>
                                    <div class="pullDownText1 pullDownText" onclick="pullDown1()">展开全部</div>
                                    <div class="user-name" style="text-align: left;">
                                        投放城市数据
                                    </div>
                                    <div class="" style="display: flex;justify-content: center;">
                                        <canvas id="cityData" width="600" height="282.5"></canvas>

                                    </div>
                                    <div id="dataArr1" style="margin: 10px; padding-top: 15px;visibility: hidden;height: 0;">
                                        <div class="dataRow">
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  城市数据 end-->

                        <!--  行业数据 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth positionBox">
                                    <div class="pullDown" onclick="pullDown2()"></div>
                                    <div class="pullDownText2 pullDownText" onclick="pullDown2()">展开全部</div>
                                    <div class="user-name" style="text-align: left;">
                                        行业数据
                                    </div>
                                    <div>
                                        <canvas id="businessData" width="500" height="282.5"></canvas>
                                    </div>
                                    <div id="dataArr2" style="margin: 10px; padding-top: 15px;visibility: hidden;height: 0;">
                                        <div class="dataRow">
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>互联网</p>
                                                <p>74</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>医美美容</p>
                                                <p>85</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                            <span>
                                                <p>服务业</p>
                                                <p>56</p>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  行业数据 end-->

                    </div>

                </div>
            </div>

            <div class="list-title" style="margin-bottom: 25px;">
                <div class="item activeBtn" onclick="changeList(1,this)">首页banner</div>
                <div class="item" onclick="changeList(1,this)">社群广告位</div>
            </div>


            <!-- 列表 start -->
            <div class="list">
                <div class="list-title1" id="list-title1">
                    <div class="user-name" style="text-align: left;margin-left: 0;">
                        首页轮播
                    </div>
                    <div class="item">
                        ✚ 添加轮播
                    </div>
                </div>

                <div class="list-title1" id="list-title2" style="display: none;">
                    <div class="user-name" style="text-align: left;margin-left: 0;">
                        社群广告位
                    </div>
                    <div class="item">
                        ✚ 添加位置
                    </div>
                    <div class="positionBox1" style="color: #5C5F66FF;cursor: pointer;">
                        正在投放
                        <div class="pullDown1"></div>
                    </div>
                </div>

                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 列表 end -->



            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script type="text/html" id="associateTpl">
    {{# if(d.associate == 1) { }}
    <span>公众号</span> {{# } else if(d.associate == 2) { }}
    <span>小程序</span> {{# } else { }}
    <span>已合并</span> {{# } }}
</script>

<script type="text/html" id="statusTpl">
    {{# if(d.status == 1) { }}
    <span>已授权</span> {{# } else { }}
    <span>未授权</span> {{# } }}
</script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="switch_state" {{ d.state==1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barDemo">
    <button lay-event="upgrade" onclick="upgrade({{d.id}})" class="btn btn-sm btn-outline-secondary">升级会员</button>

</script>
<script>
    //切换
    function changeList(t, e) {
        $('.list-title .item').removeClass('activeBtn');
        $(e).addClass('activeBtn');
        if ($(e).text() === '首页banner') {
            $('#list-title1').css('display', 'flex')
            $('#list-title2').css('display', 'none')
        } else if ($(e).text() === '社群广告位') {
            $('#list-title1').css('display', 'none')
            $('#list-title2').css('display', 'flex')
        }
    }

    function pullDown1() {
        if ($('.pullDownText1').text() == '收起') {
            $('#dataArr1').css('visibility', 'hidden')
            $('#dataArr1').css('height', '0')
            $('.pullDownText1').text('展开全部')
        } else if ($('.pullDownText1').text() == '展开全部') {
            $('#dataArr1').css('visibility', 'visible')
            $('#dataArr1').css('height', '100%')
            $('.pullDownText1').text('收起')
        }
    };

    function pullDown2() {
        if ($('.pullDownText2').text() == '收起') {
            $('#dataArr2').css('visibility', 'hidden')
            $('#dataArr2').css('height', '0')
            $('.pullDownText2').text('展开全部')
        } else if ($('.pullDownText2').text() == '展开全部') {
            $('#dataArr2').css('visibility', 'visible')
            $('#dataArr2').css('height', '100%')
            $('.pullDownText2').text('收起')
        }
    };

    window.onresize = function() {
        // resizeMyChartContainer1();
        // myChart1.resize();
    }

    // 广告位营业额
    var chartDom1 = document.getElementById('businessVolume');
    // var resizeMyChartContainer1 = function () {
    //     let domWidth = $('.card-dth').width();
    //     chartDom1.style.width = (domWidth -100) + 'px';
    //     chartDom1.style.height = (domWidth /2 - 100)  + 'px';
    // };
    // resizeMyChartContainer1()
    var myChart1 = echarts.init(chartDom1);
    var option1 = {
        title: '',
        tooltip: {
            trigger: 'item'
        },
        legend: [{
            top: 'center',
            left: '65%',
            orient: 'horizontal',
            itemGap: 100,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                value: 30,
                name: '年收入'
            }, {
                value: 20,
                name: '月收入'
            }, ],
        }, {
            top: 'center',
            left: '85%',
            orient: 'horizontal',
            itemGap: 100,
            itemWidth: 10,
            itemHeight: 10,
            data: [{
                value: 40,
                name: '总营业额'
            }, {
                value: 50,
                name: '实时收入'
            }, ],
        }, ],
        color: ['#ff6364', '#e6a501', '#5b78fe', '#8fe0fe'], //手动设置每个图例的颜色
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '25%',
                top: '40%',
                style: {
                    //value当前进度
                    text: "9998",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '27%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '总收入',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                name: '设备状态', //系列名称
                type: 'pie', //类型 pie表示饼图
                radius: ['60%', '90%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                center: ['33%', '50%'], //控制饼图位置
                itemStyle: { //图形样式
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },
                },

                label: {
                    show: false,
                    position: 'left'
                },
                data: [{
                    value: 30,
                    name: '年收入'
                }, {
                    value: 20,
                    name: '月收入'
                }, {
                    value: 40,
                    name: '总营业额'
                }, {
                    value: 50,
                    name: '实时收入'
                }, ]
            }
        ]
    };
    myChart1.setOption(option1);
    // myChart1.resize();

    // 城市数据
    var chartDom = document.getElementById('cityData');
    var myChart = echarts.init(chartDom);
    var option = {
        title: '',
        tooltip: {
            trigger: 'item'
        },
        //   legend: {
        // 	top: '20%',
        // 	left: '75%',
        // },
        color: ['#f24f21', '#5c78ff', '#fd6263', '#4e1ef2', '#f8ab18'], //手动设置每个图例的颜色
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '48%',
                top: '40%',
                style: {
                    //value当前进度
                    text: "5",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '45%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '热门地区',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                name: '设备状态', //系列名称
                type: 'pie', //类型 pie表示饼图
                radius: ['65%', '90%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                center: ['50%', '50%'], //控制饼图位置
                itemStyle: { //图形样式
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },

                },
                label: {
                    normal: {
                        show: true, //展示
                        position: 'outside', // outside表示文本显示位置为外部
                        textStyle: {
                            // color: ['#f24f21',  '#5c78ff',  '#fd6263', '#4e1ef2','#f8ab18'],
                        }
                    },
                    emphasis: { //文本样式
                        show: true, //展示
                        textStyle: { //文本样式
                            fontSize: '14',
                            fontWeight: '600',
                        }
                    }
                },
                labelLine: { //引导线设置
                    normal: {
                        show: true, //引导线显示
                        length: 40,
                    }
                },
                data: [{
                    value: 5688,
                    name: '深圳 5688',
                    color: '#f24f21'
                }, {
                    value: 5688,
                    name: '东莞 5688'
                }, {
                    value: 220,
                    name: '东莞1 220'
                }, {
                    value: 220,
                    name: '佛山 220'
                }, {
                    value: 6660,
                    name: '广州 6660'
                }, ],

            }
        ]
    };
    myChart.setOption(option);

    // 虚线环形数组


    // 行业数据
    var chartDom = document.getElementById('businessData');

    var myChart = echarts.init(chartDom);
    var option = {
        title: '',
        tooltip: {
            trigger: 'item'
        },
        legend: [{
            icon: 'circle',
            top: 'center',
            left: '58%',
            orient: 'vertical',
            itemGap: 40,
            itemWidth: 10,
            itemHeight: 10,
            // width:'30',
            textStyle: {
                // color : '#000',
                // fontWeight : 'bold',
                fontSize: 16,
                // width:20,
                height: 20,
                rich: {
                    a: {
                        // color: '#999',
                        lineHeight: 20,
                    },
                    b: {
                        fontSize: 16
                    },
                    c: {
                        width: '200',
                        height: 10,
                    }
                }
            },
            data: [{
                value: 47,
                name: '{a|医美}\n{c|7}',
                itemStyle: {
                    normal: {
                        color: '#FF6363FF'
                    }
                }
            }, {
                value: 86,
                name: '{a|地产}\n{c|86}',
                itemStyle: {
                    normal: {
                        color: '#E6A500FF'
                    }
                }
            }, {
                value: 88,
                name: '{a|互联网}\n{c|88}',
                itemStyle: {
                    normal: {
                        color: '#8FDFFEFF'
                    }
                }
            }, {
                value: 41,
                name: '{a|零售}\n{c|21}',
                itemStyle: {
                    normal: {
                        color: '#3793FAFF'
                    }
                }
            }, ],
        }, {
            icon: 'circle',
            top: 'center',
            left: '75%',
            orient: 'vertical',
            itemGap: 40,
            itemWidth: 10,
            itemHeight: 10,
            // width:'30',
            textStyle: {
                // color : '#000',
                // fontWeight : 'bold',
                fontSize: 16,
                // width:20,
                height: 20,
                rich: {
                    a: {
                        // color: '#999',
                        lineHeight: 20,
                    },
                    b: {
                        fontSize: 16
                    },
                    c: {
                        width: '200',
                        height: 10,
                    }
                }
            },
            data: [{
                value: 88,
                name: '{a|服装}\n{c|5888}',
                itemStyle: {
                    normal: {
                        color: '#233AE2FF'
                    }
                }
            }, {
                value: 38,
                name: '{a|餐饮}\n{c|5888}',
                itemStyle: {
                    normal: {
                        color: '#5B78FFFF'
                    }
                }
            }, {
                value: 48,
                name: '{a|汽车}\n{c|58}',
                itemStyle: {
                    normal: {
                        color: '#915BFFFF'
                    }
                }
            }, {
                value: 48,
                name: '{a|服务}\n{c|58}',
                itemStyle: {
                    normal: {
                        color: '#FA32A3FF'
                    }
                }
            }, ],

        }],
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '28%',
                top: '40%',
                style: {
                    //value当前进度
                    text: "8",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 34,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: '24%',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '热门行业',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16
                }
            }
        ],
        series: [ //系列列表
            {
                name: '设备状态', //系列名称
                type: 'pie', //类型 pie表示饼图
                radius: ['55%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                center: ['30%', '50%'], //控制饼图位置
                itemStyle: { //图形样式

                    //  emphasis:{
                    // shadowBlur: 10 ,
                    // shadowOffsetX: 0 ,
                    // shadowColor: '#fff'
                    //  },
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        borderWidth: 5, //宽度
                        borderColor: '#fff',
                        label: { //饼图图形上的文本标签
                            show: false //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },

                },
                label: {
                    normal: {
                        show: false, //展示
                        position: 'outside', // outside表示文本显示位置为外部
                        textStyle: {}
                    },
                    //  emphasis: {    //文本样式
                    //      show: true,    //展示
                    //      textStyle: {    //文本样式
                    //          fontSize: '14',
                    //          fontWeight: '600',
                    //      }
                    //   }
                },
                labelLine: { //引导线设置
                    //     normal: {
                    //          show: true,   //引导线显示
                    // length: 40 ,
                    //     }
                },
                data: [{
                    value: 47,
                    name: '{a|医美}\n{c|7}',
                    itemStyle: {
                        normal: {
                            color: '#FF6363FF'
                        }
                    }
                }, {
                    value: 86,
                    name: '{a|地产}\n{c|86}',
                    itemStyle: {
                        normal: {
                            color: '#E6A500FF'
                        }
                    }
                }, {
                    value: 88,
                    name: '{a|互联网}\n{c|88}',
                    itemStyle: {
                        normal: {
                            color: '#8FDFFEFF'
                        }
                    }
                }, {
                    value: 41,
                    name: '{a|零售}\n{c|21}',
                    itemStyle: {
                        normal: {
                            color: '#3793FAFF'
                        }
                    }
                }, {
                    value: 88,
                    name: '{a|服装}\n{c|5888}',
                    itemStyle: {
                        normal: {
                            color: '#233AE2FF'
                        }
                    }
                }, {
                    value: 38,
                    name: '{a|餐饮}\n{c|5888}',
                    itemStyle: {
                        normal: {
                            color: '#5B78FFFF'
                        }
                    }
                }, {
                    value: 48,
                    name: '{a|汽车}\n{c|58}',
                    itemStyle: {
                        normal: {
                            color: '#915BFFFF'
                        }
                    }
                }, {
                    value: 48,
                    name: '{a|服务}\n{c|58}',
                    itemStyle: {
                        normal: {
                            color: '#FA32A3FF'
                        }
                    }
                }, ],

            }, {
                name: '', //系列名称
                type: 'pie', //类型 pie表示饼图
                radius: ['45%', '52%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                center: ['30%', '50%'], //控制饼图位置
                itemStyle: { //图形样式
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        borderWidth: 5, //宽度
                        borderColor: '#fff',
                        label: { //饼图图形上的文本标签
                            // show: false  //平常不显示
                        },
                        labelLine: { //标签的视觉引导线样式
                            show: false //平常不显示
                        }
                    },

                },
                label: {
                    normal: {
                        show: false, //展示
                        position: 'outside', // outside表示文本显示位置为外部
                    },
                },
                data: [{
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    }, {
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: '#ABBBC6FF'
                            }
                        },
                    },


                ],

            }
        ]
    };
    myChart.setOption(option);







    // layui插件
    layui.use('table', function() {
        var table = layui.table,
            form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable',
            url: '{:url("/console/user")}',
            method: 'post',
            page: true //开启分页
                ,
            cols: [
                [{
                    field: 'id',
                    title: 'ID'
                }, {
                    field: 'headimg',
                    title: '头像',
                    width: 80,
                    templet: function(d) {
                        return '<div onclick="show_img(this)" ><img src="' + d.headimg + '" ' + 'alt="" width="60px" height="60px"></div>';
                    }
                }, {
                    field: 'nickname',
                    title: '昵称'
                }, {
                    field: 'associate',
                    title: '所在端',
                    templet: '#associateTpl',
                    unresize: true
                }, {
                    field: 'state',
                    title: '状态',
                    templet: '#switchTpl',
                    unresize: true
                }, {
                    field: 'status',
                    title: '授权',
                    templet: '#statusTpl',
                    unresize: true
                }, {
                    field: 'create_time',
                    title: '注册时间'
                }, {
                    field: 'statistics',
                    title: '统计',
                    width: 250,
                    align: 'left'
                }, {
                    field: 'rightbtn',
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo'
                }]
            ],
            done: function(res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function(res) {
                return {
                    "code": res.data.code,
                    "msg": res.data.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });
    })
    let labels = [];
    let label1 = []
    for (var i = 0; i < 31; i++) {
        labels.push(i);
        label1.push(parseInt(Math.random() * i + 1, 10));
    }

    var ctx = document.getElementById("post")
    var data = {
        labels: labels,
        datasets: [{
                label: '',
                backgroundColor: '#F2FBFF',
                borderColor: "#5B78FF", //路径颜色
                pointBackgroundColor: "#5B78FF", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data: label1,
                borderWidth: '2',
                pointRadius: 0
            },

        ],

    }
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    tension: 0,
                    max: 50
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }]
            }
        }
    });








    //切换
    function commtype(t, e) {
        $('.sel-bottom').removeClass('avt');
        $(e).addClass('avt');
        type = t;
        keyword = '';
        $('input[name=keyword]').val('');
        window.history.replaceState(null, null, './index1.html?type=' + type);
    }

    function add() {
        window.location.href = '{:url("/resource/resourceadd")}';
    }
</script>
<style>
    .positionBox1 {
        position: relative;
    }
    
    .positionBox1 .pullDown1 {
        position: absolute;
        right: -35%;
        top: 115%;
        transform: rotate(180deg);
        cursor: pointer;
    }
    
    .pullDown1:before,
    .pullDown1:after {
        position: absolute;
        content: '';
        border-top: 7px transparent dashed;
        border-left: 7px transparent dashed;
        border-right: 7px transparent dashed;
        border-bottom: 7px #fff solid;
    }
    
    .pullDown1:before {
        border-bottom: 7px #5C5F66FF solid;
    }
    
    .pullDown1:after {
        top: 2px;
        border-bottom: 7px #fff solid;
    }
    
    .list-title1 .item {
        border: 1px solid #3F6EFFFF;
        color: #3F6EFFFF !important;
        background-color: #fff !important;
        margin-left: 45px;
    }
    
    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }
    
    .list-title,
    .list-title1 {
        display: flex;
        align-items: center;
    }
    
    .list-title .item,
    .list-title1 .item {
        font-size: 14px;
        border-radius: 3px;
        background-color: #F0F0F0FF;
        color: #999999FF;
        display: grid;
        place-items: center;
        margin-right: 45px;
        cursor: pointer;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .dataRow {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        width: 100%;
    }
    
    .dataRow span {
        display: block;
        width: 20%;
    }
    
    .positionBox {
        position: relative;
    }
    
    .positionBox .pullDown {
        position: absolute;
        right: 2%;
        bottom: 2%;
        transform: rotate(180deg);
        cursor: pointer;
    }
    
    .positionBox .pullDownText {
        position: absolute;
        right: 6%;
        bottom: 3.5%;
        color: #5C5E66FF;
        cursor: pointer;
    }
    
    .pullDown:before,
    .pullDown:after {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }
    
    .pullDown:before {
        border-bottom: 10px #898A8FFF solid;
    }
    
    .pullDown:after {
        top: 2px;
        /*覆盖并错开1px*/
        border-bottom: 10px #fff solid;
    }
    
    .adData-content {
        display: flex;
        margin-top: 13px;
        width: 100%;
        align-items: center;
        margin-bottom: 30px;
    }
    
    .adData-count {
        flex: 1;
        color: #808080;
        text-align: center;
    }
    
    .adData-money {
        flex: 1;
        color: #5B78FF;
        text-align: center;
        font-size: 1.125rem;
    }
    
    .title {
        display: flex;
        color: #666666;
        align-items: center;
    }
    
    .left-index {
        display: block;
        background: #798bf7;
        border-radius: 50%;
        color: #fff;
        width: 23px;
        height: 23px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .right-index {
        display: block;
        background: #EFF0F4;
        border-radius: 50%;
        color: #000;
        width: 23px;
        height: 23px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }
    
    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }
    
    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }
    
    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .sel-bottom:active {
        background: #3377FF;
    }
    
    .card-dth {
        padding: 8px;
    }
    
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }
    
    .user {
        display: flex;
        justify-content: space-between;
    }
    
    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;
    }
    
    .bg-txt {
        display: flex;
        margin-top: 5px;
    }
    
    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }
    
    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        /* padding-bottom: 20px; */
    }
    
    .rig-img img {
        width: 9rem;
        height: 9rem;
    }
    
    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }
    
    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }
    
    .txt-cen {
        text-align: center;
    }
    
    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }
    
    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }
    
    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    
    .d-th {
        padding-left: 10px;
        text-align: center;
    }
    
    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }
    
    .t {
        color: #576AFB;
    }
    
    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }
    
    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }
    
    .b {
        color: #FF6739;
    }
    
    .w {
        color: #00A0FF;
    }
    
    .keword {
        display: flex;
    }
    
    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }
    
    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }
    
    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>

</html>